<template>
  <a-card>
    <template #title>
      <span style="font-size: 20px;margin-left: 5px"> 同案类案人设置</span>
    </template>
    <a-button class="btn_normal_color" slot="extra" icon="rollback" @click="back">返回</a-button>
    <div>
      <a-form-model
        ref="myForm"
        :rules="rules"
        :model="info"
      >
        <a-col :xxl="6" :lg="6" :sm="24">
          <a-form-model-item label="规则名称" prop="name" :labelCol="{ span: 5 }" :wrapperCol="{ span: 16 }">
            <a-input v-model="info.name" />
          </a-form-model-item>
        </a-col>
        <a-col :xxl="6" :lg="6" :sm="24">
          <a-form-model-item label="空间距离（米）" prop="range_space" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
            <a-input-number v-model="info.range_space" style="width: 100%" />
          </a-form-model-item>
        </a-col>
        <a-col :xxl="6" :lg="6" :sm="24">
          <a-form-model-item label="时间距离（分）" prop="range_time" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
            <a-input-number v-model="info.range_time" style="width: 100%" />
          </a-form-model-item>
        </a-col>
        <a-col :xxl="6" :lg="6" :sm="24">
          <a-form-model-item label="社矫对象" prop="pernames" :labelCol="{ span: 5 }" :wrapperCol="{ span: 16 }">
            <a-input v-model="info.pernames" addon-after="请选择" @click="chooseCorrectPerson" />
          </a-form-model-item>
        </a-col>
        <a-col :xxl="24" :lg="24" :sm="24">
          <a-form-model-item>
            <div style="text-align: center">
              <a-button class="btn_primary_color" type="primary" @click="finish">
                完成
              </a-button>
              <a-button class="btn_normal_color" style="margin-left: 10px;" @click="cancel">
                取消
              </a-button>
            </div>
          </a-form-model-item>
        </a-col>
      </a-form-model>
      <!-- 选择社矫对象 -->
      <SelectCorrectPerson :visible="openModel" :rule-id="ruleId" @close="closePersonModel" @ok="completeSelection"/>
    </div>
  </a-card>
</template>
<script>
import { St_enableList, St_enableValue } from '@/enumeration/St_enable'
import { saveRuleSetting, viewSamecaseRule, existsRuleName } from '@/api/correction/crw_rule_samecase'
import moment from 'moment'
import storage from 'store'
import { APP_USER } from '@/store/mutation-types'

export default {
  components: { SelectCorrectPerson: () => import('@/views/correction/warning/SelectCorrectPerson.vue') },
  computed: {
    St_enableList () {
      return St_enableList
    }
  },
  data () {
    return {
      info: {
        id: undefined,
        name: undefined,
        range_space: undefined,
        range_time: undefined,
        pernames: undefined,
        status: St_enableValue.YES,
        createuserid: undefined,
        createusername: undefined,
        createtime: undefined
      },
      personIds: [],
      groupIds: [],
      openModel: false,
      rules: {
        name: [
          { required: true, message: '请输入规则名称', trigger: 'blur' },
          { min: 1, max: 33, message: '规则名称最大长度不能超过33', trigger: 'blur' }
        ],
        range_space: [
          { required: true, message: '请选择空间距离', trigger: 'blur' },
          { type: 'number', min: 1, max: 99999, message: '空间距离范围需要在1 ~ 99999之间', trigger: 'blur' }
        ],
        range_time: [
          { required: true, message: '请选择时间距离', trigger: 'blur' },
          { type: 'number', min: 1, max: 99999, message: '时间距离范围需要在1 ~ 99999之间', trigger: 'blur' }
        ]
      },
      ruleId: undefined
    }
  },
  methods: {
    async finish () {
      let validateFlag
      this.$refs.myForm.validate(valid => {
        validateFlag = valid
      })
      if (!validateFlag) {
        this.$message.warning('请填写必填信息！')
        return
      }
      console.log(this.info)

      const existsResult = await existsRuleName(this.info.name)
      if (existsResult.code !== 0) {
        this.$message.error('校验规则名称是否存在失败!')
        return
      }
      if (existsResult.data) {
        this.$message.error('该规则名称已存在，请换个名称!')
        return
      }

      const { code } = await saveRuleSetting(this.info, this.personIds.join(','), this.groupIds.join(','))
      if (code !== 0) {
        this.$message.error('保存同案类案人设置失败!')
        return
      }
      this.$message.success('保存成功')
      this.back()
    },
    cancel () {
      this.back()
    },
    back () {
      this.$router.push({
        path: '/CorrectSameCase',
        query: this.$route.query
      })
    },
    chooseCorrectPerson () {
      this.openModel = true
    },
    closePersonModel () {
      this.openModel = false
    },
    completeSelection (checkedPersonIds, checkedGroupIds, pernames) {
      this.openModel = false
      this.personIds = checkedPersonIds
      this.groupIds = checkedGroupIds
      this.info.pernames = pernames
      console.log(checkedPersonIds, checkedGroupIds, pernames)
    }
  },
  async created () {
    this.ruleId = this.$route.query.ruleId
    if (this.ruleId) {
      const { code, data } = await viewSamecaseRule(this.ruleId)
      if (code !== 0) {
        this.$message.error('未获取到规则详细信息')
        return
      }
      this.info = data
    } else {
      const today = moment().format('YYYY-MM-DD HH:mm:ss')
      this.info.name = '同案类案人设置-' + today
      this.info.createuserid = storage.get(APP_USER).userId
      this.info.createusername = storage.get(APP_USER).fullname
      this.info.createtime = today
    }
  }
}
</script>
<style></style>
